<!DOCTYPE html>
<html>
<head>


    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta charset="utf-8"/>
    <title>注册</title>
    <meta name="keywords" content="{$Think.CONFIG.keywords}"/>
    <meta name="description" content="{$Think.CONFIG.description}"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <!--<include file="Public/head"/>-->

    <script src="__PUBLIC__/assets_h/javascripts/main.js" type="text/javascript"></script>
    <!--<script src="__PUBLIC__/assets_h/javascripts/jquery-3.1.0.min.js" type="text/javascript"></script>-->
    <link href="__PUBLIC__/assets_h/stylesheets/bootstrap.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/font-awesome.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/se7en-font.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/isotope.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/jquery.fancybox.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/fullcalendar.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/wizard.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/select2.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/morris.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/datatables.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/datepicker.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/timepicker.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/colorpicker.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/bootstrap-switch.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/daterange-picker.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/typeahead.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/summernote.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/style.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="__PUBLIC__/assets_h/stylesheets/color/green.css" media="all" rel="alternate stylesheet" title="green-theme" type="text/css"/>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery-ui.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/bootstrap.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/raphael.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/selectivizr-min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.vmap.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.vmap.sampledata.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.vmap.world.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.bootstrap.wizard.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/fullcalendar.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/gcal.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/datatable-editable.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.easy-pie-chart.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/excanvas.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.isotope.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/isotope_extras.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/modernizr.custom.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.fancybox.pack.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/select2.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/styleswitcher.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/wysiwyg.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/summernote.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.inputmask.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.validate.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/bootstrap-fileupload.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/bootstrap-datepicker.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/bootstrap-timepicker.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/bootstrap-colorpicker.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/bootstrap-switch.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/typeahead.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/daterange-picker.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/date.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/morris.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/skycons.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/fitvids.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/jquery.sparkline.min.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/main.js" type="text/javascript"></script>
    <script src="__PUBLIC__/assets_h/javascripts/respond.js" type="text/javascript"></script>


    <!--<include file="../../../Public/assets_a/bootstrap.css"/>-->


    <script type="text/javascript">

        //判断输入密码的类型
        function CharMode(iN) {
            if (iN >= 48 && iN <= 57) //数字
                return 1;
            if (iN >= 65 && iN <= 90) //大写
                return 2;
            if (iN >= 97 && iN <= 122) //小写
                return 4;
            else
                return 8;
        }
        //bitTotal函数
        //计算密码模式
        function bitTotal(num) {
            modes = 0;
            for (i = 0; i < 4; i++) {
                if (num & 1) modes++;
                num >>>= 1;
            }
            return modes;
        }
        //返回强度级别
        function checkStrong(sPW) {
            if (sPW.length < 6)
                return 0; //密码太短，不检测级别
            Modes = 0;
            for (i = 0; i < sPW.length; i++) {
                //密码模式
                Modes |= CharMode(sPW.charCodeAt(i));
            }
            return bitTotal(Modes);
        }

        //显示颜色
        function pwStrength(pwd) {
            Dfault_color = "#eeeeee";     //默认颜色
            L_color = "#FF0000";      //低强度的颜色，且只显示在最左边的单元格中
            M_color = "#FF9900";      //中等强度的颜色，且只显示在左边两个单元格中
            H_color = "#33CC00";      //高强度的颜色，三个单元格都显示
            if (pwd == null || pwd == '') {
                Lcolor = Mcolor = Hcolor = Dfault_color;
            }
            else {
                S_level = checkStrong(pwd);
                switch (S_level) {
                    case 0:
                        Lcolor = Mcolor = Hcolor = Dfault_color;
                        break;
                    case 1:
                        Lcolor = L_color;
                        Mcolor = Hcolor = Dfault_color;
                        break;
                    case 2:
                        Lcolor = Mcolor = M_color;
                        Hcolor = Dfault_color;
                        break;
                    default:
                        Lcolor = Mcolor = Hcolor = H_color;
                }
            }
            document.getElementById("strength_L").style.background = Lcolor;
            document.getElementById("strength_M").style.background = Mcolor;
            document.getElementById("strength_H").style.background = Hcolor;
            return;
        }


    </script>

    <style>
        .option1{
            color:gainsboro;
        }
        .alert1 {
            padding: 5px;
            background-color: #03c2f9;

        }

        .text-primary1 {
            margin: 5px 0 3px;
            font-size: 18px;
            font-weight: bold;
        }

        .line-h {
            line-height: 0.9;
        }
        .option1 a span{
            color: grey;

        }

    </style>
</head>
<body style="position: relative;padding-top: 40px">


<include file="Public/header"/>

<div class="form-group">
    <div class="col-md-12 col-sm-offset-1">
        <h3 style="color: #4cb4ff; "><p class="bg-white" style="margin-bottom: -10px;margin-top: 10px">个人信息</p></h3>
        <h4><p class="bg-info" style="width: 87% ;padding:10px"><a href="#" style="color: white">首页</a>/个人信息</p></h4>
    </div>
</div>

<div class="container">
    <div class="container-fluid main-content">


        <form action="{:U('register/register')}" method="post" class="form-horizontal" name="from1">


            <div class="form-group">
                <div class="col-md-5">

                </div>
                <div class="col-md-4  col-md-offset-6">
                    <div style="width: 100px; height: 100px; background: grey">
                        <div><br/></div>
                        <div style="margin-top: 20px; margin-left: 15px; ">
                            <input type="file">
                        </div>

                    </div>
                </div>

            </div>
            <div class="form-group">

                <div class="col-md-3 col-md-offset-5">
                    <input class="form-control" placeholder="旧密码" type="password" id="old_pass" name="old_pa" >
                </div>
                <div class="" style="margin-top: -7px" >
                    <span id="old_p"></span>
                </div>


            </div>

            <div class="form-group">
                <div class="col-md-3 col-md-offset-5">
                    <input name="pw" id="p1_cmp_old" class="form-control" placeholder="新密码" type=password size="20"onKeyUp="check_new_and_old()">
                </div>
                <div class="col-md-4" style="margin-top: 6px;position: relative">
                    <span id="new_p"></span>
                    <!--<table width="250" border="0" cellpadding=2" bordercolor="#eeeeee" style='display:inline;'>
                        <tr hidden style="text-align: center;">

                            <td width="70" id="strength_L" bgcolor="red" class="line-h">低</td>
                            <td width="70" id="strength_M" bgcolor="yellow" class="line-h">中</td>
                            <td width="70" id="strength_H" bgcolor="green" class="line-h">高</td>
                        </tr>
                    </table>-->
                </div>
            </div>


            <div class="form-group">

                <div class="col-md-3 col-md-offset-5">
                    <input class="form-control" name="pw" id="pw2" placeholder="确认新密码" type="password" onkeyup="validate()"/>

                </div>

                <div class="col-md-4"><span id="tishi"></span></div>
            </div>


            <!--<div class="form-group">

                <div class="col-md-3 col-md-offset-5">
                    <input class="form-control" placeholder="真实姓名" type="text" name="realname">
                </div>
                <label class="control-label col-md-2"></label>
            </div>



            <div class=" form-group option1" >
                <div class=" col-md-3 col-md-offset-5 option1">
                    <select class="select2able option1" id="sss">
                        <option class="option1">校园名称</option>
                    </select>
                </div>
            </div>



            <div class="form-group">

                <div class="col-md-3 col-md-offset-5">
                    <input class="form-control" placeholder="邮箱地址" type="email" name="email">
                </div>
                <label class="control-label col-md-2"></label>
            </div>

            <div class="form-group">

                <div class="col-md-3 col-md-offset-5">
                    <input class="form-control" placeholder="手机号" type="number" name="phone-number">
                </div>
                <label class="control-label col-md-2"></label>
            </div>


-->


            <div class="form-group">
                <div class="col-md-6 col-md-offset-6">
                    <button class="btn btn-primary" style="padding:3px 30px; font-size: 20px;" type="submit">注册</button>
                </div>
            </div>


        </form>


        <script>
            function validate() {
                var pw1 = document.getElementById("pw1").value;
                var pw2 = document.getElementById("pw2").value;
                if (pw1 == pw2) {
                    document.getElementById("tishi").innerHTML = "<font color='green'>两次密码相同</font>";
                    document.getElementById("submit").disabled = false;
                }
                else {
                    document.getElementById("tishi").innerHTML = "<font color='red'>两次密码不相同</font>";
                    document.getElementById("submit").disabled = true;
                }
            }
        </script>

    </div>


</div>
<script>
    function check_new_and_old() {
        var pw1 = document.getElementById("pw1").value;
        var pw2 = document.getElementById("pw2").value;
        if (pw1 == pw2) {
            document.getElementById("tishi").innerHTML = "<font color='green'>两次密码相同</font>";
            document.getElementById("submit").disabled = false;
        }
        else {
            document.getElementById("tishi").innerHTML = "<font color='red'>两次密码不相同</font>";
            document.getElementById("submit").disabled = true;
        }
    }
</script>
<script>
    //                        $("#aaa ul li").bind(function(){
    //                            $(this).attr('userid');
    //
    //                        })
    $(document).ready(function () {
        var text = $("input[name='teva']").val();
        $.ajax({
            url: "{:U('Register/finds')}", data: {name: text}, type: 'post', cache: false,
            dataType: 'json', success: function (data) {
                var str = '';
                for (var i = 0; i < data.length; i++) {
                    str += "<option value='" + data[i].id + "'>" + data[i].name + "</option>";
                }

                $("#sss").html(str);
            }
        });

    })

    $("#old_pass").blur(function () {
        var text = $("input[name='old_pa']").val();
        $.ajax({
            url: "{:U('Register/old_p')}",
            data: {name: text},
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                if(data.flag){ //flag==1：输入的密码和数据库密码不同，反之亦然。
                    document.getElementById("old_p").innerHTML = '<p> 旧密码输入错误<p/>';
                    document.getElementById("submit").disabled = false;//显示

                }else{
                    document.getElementById("old_p").innerHTML = '<p  hidden><p/>';
                    document.getElementById("submit").disabled = true;//隐藏
                }
//                $("#sss").html(str);
            }
        });

    })

    $("#p1_cmp_old").blur(function () {
        var text = $("input[name='pw']").val();
        $.ajax({
            url: "{:U('Register/vtt')}",
            data: {name: text},
            type: 'post',
            cache: false,
            dataType: 'json',
            success: function (data) {
                if(data.flag==1){
                    document.getElementById("new_p").innerHTML = '<p> 新旧密码一样<p/>';
                    document.getElementById("submit").disabled = false;

                }else{
                    document.getElementById("new_p").innerHTML = '<p  hidden><p/>';
                    document.getElementById("submit").disabled = true;
                }
//                $("#sss").html(str);
            }
        });

    })
</script>

</body>
</html>